<template>
  <div class="top-nav">
    <div class="top-nav-container">
      <!-- 城市选择 -->
      <el-dropdown
        :visible="dropdownVisible"
        @visible-change="handleDropdownVisible"
        @command="handleCityChange"
      >
        <span class="el-dropdown-link city-trigger">
          <el-icon><location /></el-icon>
          {{ currentCity }}
          <span class="replace-text" :class="{ 'active': dropdownVisible }">[更换]</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu class="custom-dropdown-menu">
            <div class="city-group">
              <div class="city-header">国内城市</div>
              <div class="city-list">
                <div
                  v-for="city in domesticCities"
                  :key="city"
                  class="city-item"
                  @click="handleCityChange(city)"
                >
                  {{ city }}
                </div>
              </div>
            </div>
            <div class="city-group">
              <div class="city-header">国外城市</div>
              <div class="city-list">
                <div
                  v-for="city in foreignCities"
                  :key="city"
                  class="city-item"
                  @click="handleCityChange(city)"
                >
                  {{ city }}
                </div>
              </div>
            </div>
            <div class="more-cities" @click="goToMoreCities">更多城市 >></div>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <!-- 快捷菜单 -->
      <div class="user-info">
        <el-popover placement="bottom" width="200" trigger="hover">
  <template #reference>
    <span class="user-link">{{ username }}</span>
  </template>
  <div class="popover-panel">
    <!-- 新增：头像 + 用户信息 -->
    <div class="user-info-container">
      <div class="avatar-container">
        <img src="https://p0.meituan.net/ingee/a29ea7a6829bbee66caa6da8bb0928dc14919.png" alt="用户头像" class="user-avatar" @click="goToMyPage" />
      </div>
      <div class="user-details">
        <div class="username">{{ username }}</div>
        <div>评价 {{ reviewCount }} 粉丝 {{ fansCount }}</div>
      </div>
    </div>

    <!-- 右下角：个人设置 | 退出 -->
    <div class="settings-container">
      <span @click="goToSettings">个人设置</span> |
      <span @click="logout">退出</span>
    </div>
  </div>
        </el-popover>
        <span class="divider">|</span>

<el-popover placement="bottom" width="160" trigger="hover">
  <template #reference>
    <span class="user-link badge-link">
      消息
      <el-badge :value="messageCount" class="badge-inline" />
    </span>
  </template>
  <div class="popover-panel">
    <el-button style="width: 100%" size="small" @click="clearMessages">忽略</el-button>
  </div>
</el-popover>
<span class="divider">|</span>


        <el-popover placement="bottom" width="160" trigger="hover">
          <template #reference>
            <el-button type="text">个人中心</el-button>
          </template>
          <div class="popover-panel">
            <p>我的评价</p>
            <p>我的收藏</p>
            <p>我的订单</p>
          </div>
        </el-popover>
        <span class="divider">|</span>
       <el-popover placement="bottom" width="160" trigger="hover">
    <template #reference>
      <el-button type="text">商户服务</el-button>
    </template>
    <div class="popover-panel">
      <p>商户中心</p>
      <p>商户合作</p>
    </div>
  </el-popover>
  
<span class="divider">|</span>
  <!-- 新增：帮助中心 -->
 <el-popover placement="bottom" width="160" trigger="hover">
    <template #reference>
      <el-button type="text">帮助中心</el-button>
    </template>
    <div class="popover-panel">
      <p>平台规则</p>
      <p>联系客服</p>
    </div>
  </el-popover>
</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Location } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()
const currentCity = ref('大连')
const domesticCities = [
  '上海', '北京', '广州', '深圳',
  '天津', '杭州', '南京', '苏州',
  '成都', '武汉', '重庆', '西安'
]
const foreignCities = ['东京', '首尔', '曼谷', '巴黎']

function handleCityChange(city) {
  currentCity.value = city
  ElMessage.success(`切换城市为 ${city}`)
  dropdownVisible.value = false
}

const username = ref('等日落')
const messageCount = ref(2)
const reviewCount = ref(1)
const fansCount = ref(0)
const dropdownVisible = ref(false)

function handleDropdownVisible(val) {
  dropdownVisible.value = val
}

function logout() {
  userStore.logout()
  router.push('/Huanglogin')
}

function clearMessages() {
  messageCount.value = 0
  ElMessage.success('消息已清空')
}

function goToSettings() {
  router.push('/HuangMy')
}

function goToMyPage() {
  router.push('/HuangMy')
}

</script>
<style scoped>
.top-nav {
  background: #f8f8f8;
  padding: 0; /* 去除内边距 */
}
.top-nav-container {
  transform: scale(0.9);
  transform-origin: top left;
}
.top-nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  height:45px;
  padding: 0 20px;
  margin-left: 9%;
}

/* 城市选择触发器样式 */
.city-trigger {
  cursor: pointer;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 5px;
}

.replace-text {
  font-size: 14px;
  color: #666;
  margin-left: 5px;
  user-select: none;
  margin-top: 2px;
  transition: color 0.3s ease;
}

.replace-text.active,
.replace-text:hover {
  color: orange;
}

/* 城市下拉菜单样式 */
.custom-dropdown-menu {
  padding: 10px;
  width: 300px;
}

.city-group {
  margin-bottom: 10px;
}

.city-header {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 14px;
}

.city-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.city-item {
  cursor: pointer;
  padding: 5px;
  text-align: center;
  border-radius: 4px;
  font-size: 14px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.city-item:hover {
  background-color: #f0f0f0;
  color: orange;
}

.more-cities {
  display: block;
  width: 100%;
  text-align: right;
  margin-top: 10px;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  transition: color 0.3s ease;
}

.more-cities:hover {
  text-decoration: underline;
  color: orange;
}

/* 用户信息区域 tab 样式 */
.user-info {
  display: flex;
  align-items: center;
  gap: 24px;
}

.user-info > * {
  position: relative;
  font-size: 14px;
  color: #333;
  transition: color 0.3s ease;
  cursor: pointer;
  padding-right: 0;
}
.divider {
  font-size: 14px;
  color: #999;
  margin: 0 8px;
  user-select: none;
}
.divider {
  font-size: 14px;
  color: #999;
  margin: 0 8px;
  user-select: none;
}
.user-info > *::after {
  position: absolute;
  right: -12px;
  color: #ccc;
}

.user-info > *:last-child::after {
  content: '';
}

.user-info > *:hover {
  color: orange;
}

/* 用户名链接 */
.user-link {
  font-size: 14px;
  color: #333;
  transition: color 0.3s ease;
}

.user-link:hover {
  color: orange;
}

/* 用户弹窗内容 */
.popover-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.popover-panel p {
  margin: 5px 0;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.popover-panel p:hover {
  color: orange;
}

.popover-panel .el-button {
  margin-top: 10px;
  font-size: 14px;
}

/* 用户信息展示 */
.user-info-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar-container {
  display: flex;
  justify-content: center;
  margin-right: 10px;
}

.user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.user-avatar:hover {
  transform: scale(1.05);
}

.user-details .username {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 14px;
}

.user-details {
  font-size: 14px;
  color: #333;
}

/* 设置区域 */
.settings-container {
  margin-top: auto;
  text-align: right;
  width: 100%;
}

.settings-container span {
  cursor: pointer;
  color: #409EFF;
  font-size: 14px;
  transition: color 0.3s ease;
}

.settings-container span:hover {
  color: orange;
}
.badge-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-inline .el-badge__content {
  position: absolute;
  top: -6px;
  right: -10px;
  transform: scale(0.8);
}

</style>